<template>
  <view class="warp">
    <c-navBar title="活动详情" is-tran></c-navBar>
    <view class="emptyIcon" v-if="msg === '活动不存在'">
      <image
        style="width: 300rpx"
        src="../../../static/empty/icon2.png"
        mode="widthFix"
      ></image>
      <text>暂无活动详情</text>
    </view>
    <view class="content" v-else>
      <!-- 背景 -->
      <view class="banner">
        <u-swiper
          :list="bannerList"
          indicatorMode="dot"
          keyName="image"
          name="image"
          height="370"
          circular
        ></u-swiper>
      </view>
      <!-- 主要内容 -->

      <view class="main">
        <view class="main-top">
          <p class="top-p1">{{ getActivity.title }}</p>
          <view class="top-p2">
            <image
              style="width: 18rpx; height: 18rpx"
              src="../static/time-icon.png"
              mode=""
            ></image>
            <text style="margin-left: 8rpx"
              >活动时间：{{
                getActivity.activityTime == null
                  ? ""
                  : getActivity.activityTime.substring(0, 10)
              }}</text
            >
          </view>
          <view class="top-p3">
            <view class="top-p4">
              <image
                style="width: 18rpx; height: 18rpx"
                src="../static/address-icon.png"
                mode=""
              ></image>
              <text style="margin-left: 8rpx"
                >活动地址：{{ getActivity.address }}</text
              >
            </view>
            <image
              style="width: 56rpx; height: 56rpx"
              src="../static/addressBig-icon.png"
              mode=""
              @click="goMap"
            ></image>
          </view>
          <view class="top-p2">
            <image
              style="width: 18rpx; height: 18rpx"
              src="../static/phone-item.png"
              mode=""
            ></image>
            <text style="margin-left: 8rpx"
              >联系电话：{{
                getActivity.phone == null ? "" : getActivity.phone
              }}</text
            >
          </view>
          <view class="top-p6">
            <p v-if="type == 2" class="blue-p1">已报名</p>
            <p v-else :class="getActivity.status == 1 ? 'blue-p' : 'blue-p2'">
              {{ getActivity.status == 1 ? "报名中" : "已结束" }}
            </p>

            <p>
              <text style="font-weight: bold; font-size: 30rpx"
                >{{ getActivity.userNum }} </text
              >/{{ getActivity.stock }}人报名
            </p>
          </view>
        </view>
        <view class="main-center">
          <p class="center-p1">活动介绍</p>
          <!-- <p class="center-p2">{{getActivity.remarks}}</p> -->
          <rich-text :nodes="remarks"></rich-text>
          <!-- <view class="center-one">
						
					</view> -->
          <p class="center-p3">温馨提示</p>
          <!-- <p class="center-p4">{{getActivity.prompt}}</p> -->
          <rich-text :nodes="prompt"></rich-text>
          <view class="line"> </view>
          <view
            class="center-twoBg"
            v-if="getActivity.status != 2 && type == 1"
          >
            <view class="center-two" @click="sureButton"> 立即报名 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import richText from "@/utils/richText.js";
export default {
  data() {
    return {
      activityId: "", //活动id
      getActivity: {}, //活动详情
      bannerList: [], //轮播背景图
      type: "", //1 线上活动 2我的活动
      remarks: "", //活动介绍
      prompt: "", //温馨提示
      msg: "",
    };
  },
  onLoad(e) {
    this.activityId = e.id;
    this.type = e.type;
    console.log(e.type, e.id);
    this.getActivityInfo(); //活动详情
  },
  onShow() {
    this.getActivityInfo(); //活动详情
  },
  methods: {
    // goBackOne() {
    // 	uni.reLaunch({
    // 		url: '/pages/my/pages/offlineActivities'
    // 	})
    // },
    // 去高德地图
    goMap() {
      const that = this;
      uni.openLocation({
        latitude: Number(that.getActivity.latitude),
        longitude: Number(that.getActivity.longitude),
        name: that.getActivity.address,
        address: that.getActivity.address,
        success: function (res1) {
          // console.log(res1, 'success');
        },
        fail(err1) {
          // console.log(err1, '打不开定位');
          uni.showToast({
            icon: "none",
            title: "网络出错,请稍后重试",
          });
        },
      });

      // uni.getLocation({
      // 	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
      // 	success: function(res) {
      // 		const latitude = res.latitude;
      // 		const longitude = res.longitude;
      // 		uni.openLocation({
      // 			latitude: Number(that.getActivity.latitude),
      // 			longitude: Number(that.getActivity.longitude),
      // 			name: that.getActivity.address,
      // 			address: that.getActivity.address,
      // 			success: function(res1) {
      // 				// console.log(res1, 'success');
      // 			},
      // 			fail(err1) {
      // 				// console.log(err1, '打不开定位');
      // 			}
      // 		});
      // 	},
      // 	fail(err) {
      // 		// console.log(err, '查不到定位');
      // 		uni.showToast({
      // 			icon: 'error',
      // 			title: '获取定位失败'
      // 		})
      // 	}
      // });
    },

    // 活动详情
    getActivityInfo() {
      this.$api
        .getActivityInfo(
          {
            id: this.activityId,
          },
          {
            custom: {
              toast: false,
              catch: true,
            },
          }
        )
        .then((res) => {
          // console.log(res, "活动详情");
          this.getActivity = res.data;
          this.remarks = richText(res.data.remarks);
          this.prompt = richText(res.data.prompt);

          this.bannerList = res.data.imgs.split(",");
        })
        .catch((err) => {
          console.log(err, "err12");
          this.msg = err.msg;
        });
    },
    // 确定参加活动
    sureButton() {
      let that = this;
      uni.showModal({
        title: "温馨提示",
        content: "确定报名参加活动吗?",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击确定');
            that.$api
              .signUp({
                activityId: that.activityId,
                status: that.getActivity.status,
                userId: uni.getStorageSync("user").userId,
              })
              .then((res) => {
                console.log(res, "报名情况");
                if (res.code === 200) {
                  uni.navigateTo({
                    url:
                      "/pages/my/pages/registrationSuccessful?id=" +
                      that.getActivity.activityId,
                  });
                }
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.emptyIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}
.line {
  width: 100%;
  height: 157rpx;
}
.warp {
  width: 100vw;
  min-height: 100vh;
}

.main {
  width: 100%;
  height: 500rpx;
  background-color: #f7f7f7;
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  // margin-top: -20rpx;

  .main-top {
    width: 100%;
    // height: 466rpx;
    background-color: #ffffff;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding: 20rpx 32rpx 0rpx;
    box-sizing: border-box;

    .top-p1 {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }

    .top-p2 {
      width: 686rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e6e6e6;
    }

    .top-p3 {
      width: 686rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e6e6e6;
    }

    .top-p6 {
      width: 686rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .blue-p {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #329cfa;
      }

      .blue-p1 {
        color: #009e42;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
      }

      .blue-p2 {
        color: #ff6d4d;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
      }
    }
  }

  .main-center {
    width: 750rpx;
    // height: 500rpx;
    margin-top: 8rpx;
    padding: 32rpx 32rpx 68rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding-bottom: 40rpx;
    box-sizing: border-box;

    .center-p1 {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #1a1a1a;
    }

    .center-p2 {
      margin-top: 24rpx;
    }

    .center-one {
      width: 686rpx;
      height: 412rpx;
      background-color: hotpink;
      margin-top: 22rpx;
    }

    .center-p3 {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
      margin-top: 40rpx;
    }

    .center-p4 {
      margin-top: 24rpx;
    }
  }
}
.center-twoBg {
  width: 750rpx;
  height: 145rpx;
  background-color: #ffffff;
  position: fixed;
  bottom: 0rpx;
  // padding-left: 32rpx;
  box-sizing: border-box;
  .center-two {
    width: 686rpx;
    height: 96rpx;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
